<!--  -->
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "../../utils/http.js";
const router = useRouter();
const dialogVisible = ref(false);
const dialog = ref(false);
let tableData = ref([]);
let form = reactive({
  name: "",
  status: "",
  permissions: "",
});
let value1 = ref(true);
let value2 = ref(false);
let name = ref("");
let names = ref("");
let list = ref([]);
let value = ref([]);
let values = ref([]);
let PageNo = ref(1);
let PageSiez = ref(10);
let total = ref(10);
const data = ref([]);
let id = ref("");
onMounted(() => {
  axios
    .all([
      axios({
        url: 'user/query/' + PageNo.value + '/' + PageSiez.value + '/',
        method: "get",
      }),
      axios({
        url: "user/permission/",
        method: "get",
      }),
    ])
    .then(
      axios.spread((res1, res2) => {
        tableData.value = res1.data.datas;
        total.value = res1.data.total
        list.value = res2.data.data;
      })
    );
});
function getall() {
  axios({
    url: 'user/query/' + PageNo.value + '/' + PageSiez.value + '/',
    method: "get",
  }).then((res) => {
    tableData.value = res.data.datas;
    total.value = res.data.total
  });
}
function handleSizeChange() {
  getall()
}
function handleCurrentChange() {
  getall()
}

function submit() {
  dialog.value = false;
  axios({
    url: "user/roles/",
    method: "post",
    data: {
      name: names.value,
      status: value1.value,
      permissions: values.value,
    },
  }).then((res) => {
    ElMessage({
      message: "新增成功",
      type: "success",
    });
  });
}
function handleEdit(index, row) {
  dialogVisible.value = true;
  id.value = row.id;
  axios({
    url: "getpermissions/" + row.id,
    method: "get",
  }).then((res) => {
    name.value = res.data.data.name;
    value2.value = res.data.data.status;
    value.value = [];
    value.value = res.data.permissions;
  });
}

function handleDelete(index, row) {
  let id = row.id;
  axios({
    url: "user/delete/" + id + "/",
    method: "delete",
    data: {
      id: row.id,
    },
  }).then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getall()
  });
}

function handleClose(done) {
  done();
}
function edit() {
  dialogVisible.value = false;
  axios({
    url: "user/change/" + id.value,
    method: "put",
    data: {
      name: name.value,
      status: value1.value,
      permissions: value.value,
    },
  }).then((res) => {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  });
}
</script>

<template>
  <el-button @click="dialog = true" type="primary">+新增角色</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="角色名称" width="180" />
    <el-table-column label="状态"><template #default="scope">
        <el-switch v-model="value1" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialog" title="角色新增" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="names"></el-input>
      </el-form-item>

      <el-form-item label="角色状态">
        <el-switch v-model="value1" />
      </el-form-item>
      <el-form-item label="权限">
        <el-transfer v-model="values" :data="list" :titles="['可添加权限', '已有权限']"
          :props="{ key: 'id', label: 'title', value: 'id' }" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">Cancel</el-button>
        <el-button type="primary" @click="submit()"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" title="角色修改" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="name"></el-input>
      </el-form-item>

      <el-form-item label="角色状态">
        <el-switch v-model="value1" />
      </el-form-item>
      <el-form-item label="权限">
        <el-transfer v-model="value" :data="list" :titles="['可添加权限', '已有权限']"
          :props="{ key: 'id', label: 'title', value: 'id' }" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="edit"> 修改 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination id="pagination" v-model:current-page="PageNo" v-model:page-size="PageSiez" :page-sizes="[10, 20, 30, 40]"
    background layout=" prev, pager, next, jumper,->,total, sizes" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" style="width: 100%" />
</template>

<style scoped></style>
